@{layout('')}
@{title(CONF.name)}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=10" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover" />
	<meta name="robots" content="all,follow" />
	@{import('spa.min@19.css', 'spa.min@19.js')}
	<script src="@{REPO.ui}"></script>
	@{import('meta', 'head', 'favicon.ico')}
	<style>
		body { background-color: #F2F5FE; }
		.login { max-width: 300px; text-align: left; margin: 0 auto; width: 100%; }
		.login > div { background-color: #FFF; padding: 30px; border-radius: var(--radius); box-shadow: 0 0 20px rgba(0,0,0,0.1); }
		footer { font-size: 11px; color: #999; text-align: center; padding: 0 0 10px; }
		footer a { color: #777; }
		h1 { font-size: 20px; margin: 0 0 15px 0; padding: 0; }
		h1 i { margin-right: 8px; font-size: 30px; vertical-align: middle; }
		h2 { font-size: 16px; margin: 0 0 15px 0; padding: 0; font-weight: normal; color: #777; }
		button { width: 100%; border: 0; padding: 8px 10px; font-size: 14px; background-color: var(--color); color: #FFF; border-radius: var(--radius); font-weight: bold; outline: 0; }
		button:hover { opacity: 0.8; }
		button:disabled { background-color: #E0E0E0 !important; color: #999 !important; opacity: 1 !important; }
		.error { padding: 5px 0; color: red; }
		.alert { background-color: #fffad7; border: 1px solid #EDE8C8; padding: 15px; border-radius: 2px; color: #988e56; font-size: 12px; line-height: 14px; }
		.alert i { margin-right: 5px; }
		.kv { line-height: 17px; font-size: 12px; color: black; }
		.kv .value { margin-left: 85px; text-align: right; }
		.kv .key { float: left; width: 100px; }
		.kv > * { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
	</style>
</head>
<body>

	<ui-component name="exec"></ui-component>

	<ui-component name="viewbox" config="centered:1;parent:window" class="invisible">
		<div class="login" data-scope="signinform">
			<div>
				<ui-component name="autofill">

					@{if PREF.user.raw}
					<div class="alert" style="margin-bottom:20px">
						<div><i class="ti ti-user"></i>@(Default account:)</div>
						<div class="kv" style="margin-top:10px">
							<div class="key">@(User name)</div>
							<div class="value b">@{PREF.user.login}</div>
						</div>
						<div class="kv">
							<div class="key">@(Password)</div>
							<div class="value b">@{PREF.user.raw}</div>
						</div>
						<button name="submit" class="button exec mt10" data-exec="?/fill">@(Fill in the form)</button>
					</div>
					@{fi}

					<h2><i class="ti ti-totaljs mr5"></i>@{'%name'}</h2>
					<ui-component name="enter" path="?">
						<ui-component name="input" path="?.login" config="required:1;autofocus:1;autofill:1" default="''" class="m">@(User name)</ui-component>
						<ui-component name="input" path="?.password" config="required:1;type:password;autofill:1" default="''" class="m">@(Password)</ui-component>
						<ui-bind path="%error" config="show;template" class="error">
							<script type="text/html">
								<i class="ti ti-exclamation-triangle"></i> {{ value }}
							</script>
						</ui-bind>
						<ui-component name="validate" path="?" style="margin-top:20px">
							<button name="submit" class="button exec" data-exec="?/submit" disabled>@(Sign in)</button>
						</ui-component>
					</ui-component>

				</ui-component>
			</div>
			<br />
			<footer>&copy; @{NOW.getFullYear()} - <a href="https://www.totaljs.com" target="_blank">@(Powered by <b>Total.js</b>)</a></footer>
		</div>
	</ui-component>

	<script>

		PLUGIN('signinform', function(exports) {

			exports.submit = function() {
				AJAX('POST @{#}/fapi/auth/', exports.form, ERROR(function(response) {
					location.href = '/' + ($('.alert').length ? '?welcome=1' : '');
				}, function(response) {
					SET('%error', response[0].error);
				}));
			};

			exports.fill = function() {
				SET('signinform @change', { login: '@{PREF.user.login}', password: '@{PREF.user.raw}' });
			};
		});

	</script>

</body>
</html>